import React, { Component } from "react"
import { observer, inject } from "mobx-react"
import { Link, withRouter } from "react-router-dom"
import cssModules from "react-css-modules"
import { Table, Divider, Tag } from "antd"
import styles from "../../index.less"

@cssModules(styles)
class Alarm extends Component {
  state = {}
  componentDidMount() {
    const { dataSource, isScroll, dom } = this.props
    if (isScroll) {
      let itemHeight = 35
      let len = dataSource.length
      if (len > 4 && this.alarmWrap) {
        this.alarmWrap.style.top = "0px"
        var tblTop = 0
        var speed = 50 // 数值越大越慢
        const marquee = () => {
          if (tblTop <= -itemHeight * len) {
            tblTop = 0
          } else {
            tblTop -= 1
          }

          this.alarmWrap && (this.alarmWrap.style.top = tblTop + "px")
        }
        let dom = document.getElementById("alarm-wrap")
        this.timer = setInterval(marquee, speed)
        dom.onmouseover = () => {
          clearInterval(this.timer)
        }
        dom.onmouseout = () => {
          this.timer = setInterval(marquee, speed)
        }
      }
    }
  }
  componentWillUnmount() {
    clearInterval(this.timer)
  }
  render() {
    const { dataSource, isScroll } = this.props
    const columns = [
      {
        title: "序号",
        width: "12%",
        render: (text, record, index) => (
          <span>{(index % dataSource.length) + 1}</span>
        ),
      },
      {
        title: "告警等级",
        width: "20%",
        dataIndex: "alarmLevel",
        render: (text, record, index) => {
          if (!text) {
            return <div>{"-"}</div>
          }
          let color = ""
          let name = ""
          switch (text) {
            case 1:
            case "1":
            case "CRITICA":
              color = "#f42359"
              name = "一级告警"
              break
            case 2:
            case "2":
            case "MAJOR":
              color = "#e70cef"
              name = "二级告警"
              break
            case 3:
            case "3":
            case "MINOR":
              color = "#ff7b06"
              name = "三级告警"
              break
            case 4:
            case "4":
            case "HINT":
              color = "#088eff"
              name = "四级告警"
              break
            default:
              name = "-"

              break
          }
          return (
            <div
              style={text && { background: color }}
              className={styles["alarm-level"]}
            >
              {text ? name : ""}
            </div>
          )
        },
      },
      {
        title: "告警信息",
        width: "36%",
        dataIndex: "alarmDesc",
        render: (text, record, index) => {
          return <div>{(text && text) || "-"}</div>
        },
      },
      {
        title: "告警时间",
        width: "32%",
        dataIndex: "startTime",
        render: (text, record, index) => <div>{text ? text : "-"}</div>,
      },
    ]
    let data =
      dataSource.length > 4
        ? dataSource.concat(dataSource).map((item, i) => {
            return { ...item, key: i.toString(36) + i }
          })
        : dataSource
    if (!isScroll) {
      return (
        <div styleName="table-modal-wrap">
          <Table
            columns={columns}
            dataSource={dataSource}
            pagination={false}
            rowKey={(item, index) => {
              return index.toString(36) + index
            }}
          />
          <div styleName={"modal-divider"} />
        </div>
      )
    }
    return (
      <div styleName="table-wrap">
        <Table
          columns={columns}
          dataSource={[]}
          className={styles["table-header"]}
          pagination={false}
          rowKey={(item, index) => {
            return index.toString(36) + index
          }}
        />
        <div styleName="tbody-wrap">
          <div
            styleName="tbody-ct"
            ref={(c) => {
              this.alarmWrap = c
            }}
          >
            <Table
              columns={columns}
              showHeader={false}
              dataSource={data}
              pagination={false}
              rowKey={(item, index) => {
                return index.toString(36) + index
              }}
            />
          </div>
        </div>
        <div styleName={"divider"} />
      </div>
    )
  }
}

export default Alarm
